<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../img/jiejie_logo_s.png">
    <link rel="stylesheet" href="../css/XQing.css">
    <link rel="stylesheet" href="../css/head.css">
    <link rel="stylesheet" href="../css/XQing_TanChuang.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <title>杰杰电影</title>
</head>
<body>
         <!-- 头部导航 -->
    <div class="header">
        <div class="header-inner">
            <div class="nav">
                 <!-- logo -->
                <div class="logo">
                    <a href="../index.html"><img src="../img/jiejie_logo.png" alt=""></a>
                </div>
                <div>
                    <div class="menu-item"><a href="../index.html">首页</a></div>
                    <div class="menu-item"><a href="films.html">电影</a></div>
                    <div class="menu-item"><a href="cinema.html">影院</a></div>
                    <div class="menu-item"><a href="BangDan.html">榜单</a></div>
                </div>

                <div class="search-form">
                    <input type="text" class="search-text">
                    <a href=""><span class="search-img"></span></a>
                    
                </div>
                <div class="head-user">
                    <a href="login.html" class="loginBtn">登录</a>
                    <a href="regist.html" class="loginBtn">注册</a>
                </div>
                <div class="user-info">
                    <div class="user-avatar has-login">
                        <img src="https://img.meituan.net/maoyanuser/8b5a75c66ef4efb62fb695631b13419212452.png">
                        <ul class="user-menu yes-login-menu">
                            <li class="text"><a href="">我的订单</a></li>
                            <li class="text login-name" ><a href="javascript:void 0">基本信息</a></li>
                            <li class="text"><a href="javascript:void 0" class="J-logout" data-act="logout-click">退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 避免下面的块上移 -->
    <div class="header-m"></div>

    <!-- 简介栏 -->
    <div class="banner">
        <div class="wrapper clearfix">
            <!-- 左盒子 -->
            <div class="celeInfo-left">
                <div class="avatar-shadow">
                    <img class="avatar" src="../img/XQing_avatar.jpg">
                    <div class="movie-ver">
                        <i class="imax3d"></i>
                    </div>
                </div>
            </div>
            <!-- 右盒子 -->
            <div class="celeInfo-right clearfix">
                <div class="movie-brief-container">
                    <h1 class="name">小黄人大眼萌：神偷奶爸前传</h1>
                    <div class="ename ellipsis">Minions:The Rise of Gru</div>
                    <ul>
                        <li class="ellipsis">
                            <a href="films.html" class="text-link" target="_bank">喜剧</a>
                            <a href="films.html" class="text-link" target="_bank">动画</a>
                            <a href="films.html" class="text-link" target="_bank">动作</a>
                        </li>
                        <li class="ellipsis"> 美国 / 88分钟</li>
                        <li class="ellipsis">2022-08-19中国大陆上映</li>
                    </ul>
                </div>

                <div class="action-buyBtn">
                    <div class="action clearfix" data-val="{movieid:893936}">
                        <a href="" class="wish">
                            <div>
                                <i class="icon wish-icon"></i>
                                <span class="wish-msg">想看</span>
                            </div>
                        </a>

                        <a href="" class="score-btn">
                            <div>
                                <i class="icon score-btn-icon"></i>
                                <span class="score-btn-msg">评分</span>
                            </div>
                        </a>
                    </div>
                    <a href="cinema_movies.html" class="btn buy">特惠购票</a>
                </div>

                <div class="movie-stats-container">
                    <div class="movie-index">
                        <p class="movie-index-title">杰杰口碑</p>
                        <div class="movie-index-content score normal-score">
                            <span class="index-left no-info">暂无</span>
                        </div>
                    </div>

                    <div class="movie-index">
                        <p class="movie-index-title">累计票房</p>
                        <div class="movie-index-content box">
                            <span class="stonefont">1947</span>
                            <span class="unit">万</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 详情导航栏 -->
    <div class="tab-title-container-active">
        <div class="tab-title-container">
            <div class="tab-title">介绍</div>
            <div class="tab-title">演职人员</div>
            <div class="tab-title">奖项</div>
            <div class="tab-title">图集</div>
        </div>
    </div>
    <!-- 剧情简介 -->
    <div class="module-active">
        <div class="module">
            <div class="mod-title">
                <h2>剧情简介</h2>
            </div>
            <div class="mod-content">
                <span class="dra">
                    讲述一个梦想成为全世界最强超级反派的12岁小男孩的故事。 上世纪七十年代，蓬蓬头和喇叭裤风靡之际，格鲁（史蒂夫·卡瑞尔 配音）在城郊长
                    大。他是超强反派组合“邪恶六天王”的忠实粉丝，想要跟他们一样坏，甚至加入他们。同时，他拥有一帮胡作非为的“得力助手”。凯文、斯图尔特、
                    鲍勃，以及戴着牙套又极其热衷于讨好的新小黄人奥豆，各尽所能，大显身手，与格鲁一起建造首个基地，试验首批武器，并执行首次任务。 当“邪
                    恶六天王”罢黜了他们的首领，传奇战士Wild Knuckles（艾伦·阿金 配音）后，格鲁前来应聘，希望加入组织。他并未顺利如愿，尤其当他发现自
                    己似乎比另外几位还聪明，更成了这些顶级反派们的死敌时，事情就更难办了。逃命途中，格鲁请教了一位意想不到的人，即Wild Knuckles本尊，
                    也明白了即使是大坏蛋，也有需要朋友帮助的时候。
                </span>
            </div>
        </div>

        <div class="module">
            <div class="mod-title">
                <h2>演职人员</h2>
                <a href="" class="more">全部</a>
            </div>
            <div class="mod-content">
                <div class="cele-contanier">
                    <div class="cele-group">
                        <div class="cele-type"> 导演 </div>
                        <ul class="cele-list">
                            <li class="cele">
                                <a href="" class="portrait">
                                    <img src="../img/XQing_default1.jpg" alt="" class="default-img">
                                </a>
                                <div class="info">
                                    <a href="" class="name">凯尔·巴尔达</a>
                                </div>
                            </li>

                            <li class="cele">
                                <a href="" class="portrait">
                                    <img src="../img/XQing_default2.jpg" alt="" class="default-img">
                                </a>
                                <div class="info">
                                    <a href="" class="name">布拉德·埃布尔森</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="cele-group">
                        <div class="cele-type"> 演员 </div>
                        <ul class="cele-list">
                            <li class="cele-actor">
                                <a href="" class="portrait">
                                    <img class="default-img" src="../img/XQing_default3.jpg" alt="">
                                </a>
                                <div class="info">
                                    <a href="" class="name">史蒂夫·卡瑞尔</a><br>
                                    <span class="role">饰：Gru</span>
                                </div>
                            </li>
                            <li class="cele-actor">
                                <a href="" class="portrait">
                                    <img class="default-img" src="../img/XQing_default4.jpg" alt="">
                                </a>
                                <div class="info">
                                    <a href="" class="name">皮埃尔·柯芬</a><br>
                                    <span class="role">饰：The Minions</span>
                                </div>
                            </li>
                            <li class="cele-actor">
                                <a href="" class="portrait">
                                    <img class="default-img" src="../img/XQing_default5.jpg" alt="">
                                </a>
                                <div class="info">
                                    <a href="" class="name">艾伦·阿金</a><br>
                                    <span class="role">饰：Wild Knuckles</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="module">
            <div class="mod-title">
                <h2>图集</h2>
                <a href="" class="more">全部</a>
            </div>
            <div class="mod-content">
                <div class="album clearfix">
                    <div class="img1">
                        <img class="default-img" src="../img/XQing_img1.jpg" alt="">
                    </div>
                    <div class="img2">
                        <img class="default-img" src="../img/XQing_img2.jpg" alt="">
                    </div>
                    <div class="img3">
                        <img class="default-img" src="../img/XQing_img3.jpg" alt="">
                    </div>
                    <div class="img4">
                        <img class="default-img" src="../img/XQing_img4.jpg" alt="">
                    </div>
                    <div class="img5">
                        <img class="default-img" src="../img/XQing_img5.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>

        <div class="module">
            <div class="mod-title">
                <h2>热门短评</h2>
               <button id="comment-entry">写短评</button>
               <div id="myModal">
                <!--弹窗头部-->
                <div class="modal">
                <div class="modal-header">
                 <p>快来说说你的看法</p>
                 <span class="close">&times;</span>
                </div>
                <!--弹窗文本-->
                <div class="modal-content">
                 <textarea name="" id="" cols="30" rows="5" placeholder="请写下你的看法"></textarea>
               </div>
                 <!--弹窗底部-->
                 <div class="modal-footer">
                 </div>
                </div>
            </div>

            <div class="mod-content">
                <div class="comment-list-container">
                    <ul>
                        <li class="comment-container">
                            <div class="portrait-container">
                                <div class="portrait">
                                    <img src="../img/XQing_default3.jpg" alt="">
                                </div>
                            </div>

                            <div class="main">
                                <div class="main-header clearfix">
                                    <div class="user">
                                        <span class="name">心晴</span>
                                        <span class="tag">购</span>
                                    </div>

                                    <div class="time">
                                        <span>08-12</span>
                                        <ul class="score-star clearfix">
                                            <li>
                                                <i class="half-star left active"></i>
                                                <i class="half-star right active"></i>
                                            </li>
                                            <li>
                                                <i class="half-star left active"></i>
                                                <i class="half-star right active"></i>
                                            </li>
                                            <li>
                                                <i class="half-star left active"></i>
                                                <i class="half-star right active"></i>
                                            </li>
                                            <li>
                                                <i class="half-star left active"></i>
                                                <i class="half-star right active"></i>
                                            </li>
                                            <li>
                                                <i class="half-star left active"></i>
                                                <i class="half-star right active"></i>
                                            </li>
                                        </ul>
                                    </div>

                                    <div class="operation-comment">
                                        <span class="report">举报</span>
                                        <div class="approve ">
                                            <i class="approve-icon"></i>
                                            <span class="num">8196</span>
                                        </div>
                                    </div>

                                </div>

                                <div class="comment-content">古天乐和刘青云的演技一如既往地好！超有魅力！就是开头的那几分钟打斗画面拍得太近了，IMAX画面让人看得眼花和眩晕，联系选择坐选一些。</div>
                            </div>
                        </li>
                    </ul>
                </div>
               
            </div>
        </div>
        <script src="../js/XQing.js"></script>

</body>
</html>